<route>
    {
        meta: {
            layout: 'hrm',
            title:'职级管理'
        }
    }  
</route>
<template>
    <view>

        <a-row>
            <a-col :span="5">
                <JobTypeSelect @confirm="typeConfirm" />
            </a-col>
            <a-col :span="19">
                <AntdZh>
                    <a-row>
                        <a-button v-if="$.hasPerm('hrm:job:create')" type="primary" style="margin-bottom: 10px; width: 80px;"
                            @click="$.emit('create-job', null)">
                            <template #icon><plus-outlined /></template>新增
                        </a-button>
                        <a-button style="margin-bottom: 10px; left:30px; width: 80px;" @click="resetQuery()">
                            <template #icon>
                                <SyncOutlined />
                            </template>重置
                        </a-button>
                    </a-row>
                    <a-table bordered :columns="columns" :data-source="tableData" :loading="loading"
                        :pagination="pagination" @change="handleTableChange">
                        <template #bodyCell="{ column, record, index }">
                            <template v-if="column.dataIndex === 'action'">
                                <a-row>
                                    <a-col :span="6">
                                        <a-tooltip>
                                            <template #title>修改信息</template>
                                            <view  v-if="$.hasPerm('hrm:job:update')">
                                                <a-button type="link" @click="$.emit('update-job',record.id)">
                                                    <FormOutlined />
                                                </a-button>
                                            </view>
                                        </a-tooltip>
                                    </a-col>
                                    <a-col :span="6">
                                        <a-popconfirm title="确定删除该条记录 ?" @confirm="doDelete(record.id)">
                                            <view  v-if="$.hasPerm('hrm:job:delete')">
                                                <a-button type="link">
                                                    <DeleteOutlined style="color: #f5222d;" />
                                                </a-button>
                                            </view>
                                        </a-popconfirm>
                                    </a-col>
                                </a-row>
                            </template>
                            <template v-else-if="column.dataIndex === 'status'">
                                <!--执行状态-->
                                <a-tag color="green" v-if="record.status">启用</a-tag>
                                <a-tag color="red" v-else>停用</a-tag>

                            </template>
                        </template>
                    </a-table>

                </AntdZh>
            </a-col>
        </a-row>
        <JobCreateModal/>
        <JobUpdateModal/>
        <!-- <GradeUpdateModal/> -->
    </view>
</template>
<script setup>
import JobCreateModal from './components/JobCreateModal.vue';
import JobUpdateModal from './components/JobUpdateModal.vue';
import JobTypeSelect from './components/JobTypeSelect.vue'
import { SafetyOutlined, DeleteOutlined, FormOutlined, KeyOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons-vue';
import {  deleteOne, queryList } from '@/module/hrm/api/job';

import { columns, defaultQueryParams } from './index';
import useApp from '@/hooks'
const { $, proxy } = useApp()
// 解除引用传递
const queryParams = ref($.freeStore(defaultQueryParams))
const pagination = computed(() => ({
    total: total.value,
    current: queryParams.pageNum,
    pageSize: queryParams.pageSize,
}));
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
// 表单重置
function resetQuery(){
    queryParams.value = $.freeStore(defaultQueryParams);
    reqData();
}
// 确认
function typeConfirm(e) {
    queryParams.value = $.freeStore(defaultQueryParams);
    //console.log(e)
    queryParams.value.jobTypeId = e;

    reqData();
}
function handleTableChange(page, filters, sorted) {
    queryParams.value.pageSize = page.pageSize;
    queryParams.value.pageNum = page.current;
    // 状态
    var status = filters.status;
    console.log(status)
    if ($.isNotEmpty(status)) {
        queryParams.value.status = status[0];
    } else {
        queryParams.value.status = null
    }
    reqData();
}
// 请求数据
function reqData() {
    loading.value = true;
    queryList(queryParams.value).then(res => {
        tableData.value = res.content;
        total.value = res.totalElements;
        loading.value = false;
    })
}
// 删除数据
function doDelete(id){
    deleteOne(id).then(res=>{
        $.showToast({
            title:'删除成功',
            icon:'success'
        })
        reqData();
    })
}
reqData();
$.on('fresh-job',r=>reqData());
</script>